<!-- 新增/编辑计量单位弹出框 -->
<template>
  <a-modal
    width="80%"
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    :mask-closable="false"
  >
    <template #title>添加计量单位</template>
    <a-form auto-label-width :model="currForm.list" direction="vertical">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="物料编码：">
            <a-input v-model="currForm.list.number"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="物料名称：">
            <a-input v-model="currForm.list.name"></a-input>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="规格型号：">
            <a-input v-model="currForm.list.spec"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="物料分类：">
            <a-tree-select
              :data="classficationList"
              placeholder="请选择物料"
              allow-clear
              allow-search
              :filter-tree-node="filterClassficationData"
              v-model="currForm.list.materialId"
              :field-names="{
                key: 'id',
                title: 'name',
              }"
            ></a-tree-select>
          </a-form-item>
        </a-col>
      </a-row>

      <a-form-item label="单位：">
        <a-radio-group
          size="large"
          :default-value="1"
          v-model="currForm.list.measureType"
          :style="{
            display: 'flex',
          }"
          @change="changeUnitType"
        >
          <a-radio
            :value="1"
            :style="{
              marginRight: '20px',
            }"
          >
            <template #radio="{ checked }">
              <div
                :style="{
                  display: 'flex',
                  width: '135px',
                }"
                :class="checked ? 'checked-radio' : 'unchecked-radio'"
              >
                <div
                  :style="{
                    width: '35px',
                    textAlign: 'center',
                  }"
                  :class="
                    checked
                      ? 'radio-icon-box-checked'
                      : 'radio-icon-box-unchecked'
                  "
                >
                  <icon-check-circle
                    :class="
                      checked ? 'radio-icon-checked' : 'radio-icon-unchecked'
                    "
                    class="radio-icon"
                    size="20px"
                  />
                </div>
                <div
                  :style="{
                    width: '100px',
                    textAlign: 'center',
                  }"
                >
                  单计量
                </div>
              </div>
            </template>
          </a-radio>
          <a-radio :value="2">
            <template #radio="{ checked }">
              <div
                :style="{
                  display: 'flex',
                  width: '135px',
                }"
                :class="checked ? 'checked-radio' : 'unchecked-radio'"
              >
                <div
                  :style="{
                    width: '35px',
                    textAlign: 'center',
                  }"
                  :class="
                    checked
                      ? 'radio-icon-box-checked'
                      : 'radio-icon-box-unchecked'
                  "
                >
                  <icon-check-circle
                    :class="
                      checked ? 'radio-icon-checked' : 'radio-icon-unchecked'
                    "
                    class="radio-icon"
                    size="20px"
                  />
                </div>
                <div
                  :style="{
                    width: '100px',
                    textAlign: 'center',
                  }"
                >
                  多计量
                </div>
              </div>
            </template>
          </a-radio>
        </a-radio-group>
        <a-form-item
          :label="
            currForm.list.measureType === 1 ? '计量单位：' : '计量单位组：'
          "
        >
          <a-select
            :style="{
              width: '150px',
            }"
            v-if="currForm.list.measureType === 1"
            v-model="currForm.list.singleUnitId"
          >
            <a-option
              v-for="item in singleList"
              :key="item.id"
              :value="item.id"
            >
              {{ item.name }}
            </a-option>
          </a-select>

          <a-select
            :style="{
              width: '150px',
            }"
            v-else
            v-model="currForm.list.multiGroupId"
            @change="changeMultiGroup"
          >
            <a-option v-for="item in mutilList" :key="item.id" :value="item.id">
              {{ item.name }}
            </a-option>
          </a-select>
        </a-form-item>
      </a-form-item>
      <div v-if="currForm.list.measureType !== 1">
        <a-form-item label="多计量单位：">
          <div>
            <div
              :style="{
                display: 'flex',
              }"
            >
              <a-form-item label="父单位：">
                <a-input disabled v-model="currParentName"></a-input>
              </a-form-item>
              <a-form-item label="库存单位：">
                <a-select
                  v-model="currForm.list.stockUnitID"
                  :style="{
                    width: '150px',
                  }"
                >
                  <a-option
                    v-for="item in mutliChildList"
                    :key="item.id"
                    :value="item.id"
                  >
                    {{ item.name }}
                  </a-option>
                </a-select>
              </a-form-item>
            </div>
            <div
              :style="{
                display: 'flex',
              }"
            >
              <a-form-item label="采购单位：">
                <a-select
                  v-model="currForm.list.purchaseUnitID"
                  :style="{
                    width: '150px',
                  }"
                >
                  <a-option
                    v-for="item in mutliChildList"
                    :key="item.id"
                    :value="item.id"
                  >
                    {{ item.name }}
                  </a-option>
                </a-select>
              </a-form-item>
              <a-form-item label="销售单位：">
                <a-select
                  v-model="currForm.list.saleUnitID"
                  :style="{
                    width: '150px',
                  }"
                >
                  <a-option
                    v-for="item in mutliChildList"
                    :key="item.id"
                    :value="item.id"
                  >
                    {{ item.name }}
                  </a-option>
                </a-select>
              </a-form-item>
            </div>
            <div
              :style="{
                display: 'flex',
              }"
            >
              <a-form-item label="发货单位：">
                <a-select
                  v-model="currForm.list.shipUnitID"
                  :style="{
                    width: '150px',
                  }"
                >
                  <a-option
                    v-for="item in mutliChildList"
                    :key="item.id"
                    :value="item.id"
                  >
                    {{ item.name }}
                  </a-option>
                </a-select>
              </a-form-item>
              <a-form-item label="生产单位：">
                <a-select
                  v-model="currForm.list.outputUnitID"
                  :style="{
                    width: '150px',
                  }"
                >
                  <a-option
                    v-for="item in mutliChildList"
                    :key="item.id"
                    :value="item.id"
                  >
                    {{ item.name }}
                  </a-option>
                </a-select>
              </a-form-item>
            </div>
          </div>
        </a-form-item>
      </div>

      <a-form-item label="是否启用：">
        <a-radio-group v-model="currForm.list.enable" :default-value="1">
          <a-radio :value="1">是</a-radio>
          <a-radio :value="2">否</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="备注：">
        <a-textarea
          show-word-limit
          :max-length="300"
          :auto-size="{
            minRows: 5,
          }"
          v-model="currForm.list.remark"
        ></a-textarea>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
  import { computed, ref, reactive, watch } from 'vue';
  import { cloneDeep } from 'lodash';
  import {
    GetClassificationList,
    GetUnitList,
  } from '@/api/inventory-management/material-management';

  const props = withDefaults(
    defineProps<{
      visible: boolean; // 是否显示对话框
      form?: any; // 传进来的数据
    }>(),
    {
      form: undefined,
      visible: false,
    }
  );

  const emit = defineEmits(['update:visible', 'materialEmit']);

  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  const currForm = reactive<any>({
    list: {
      number: '', // 物料编码
      name: '', // 物料名称
      spec: '', // 型号
      remark: '', // 备注
      materialId: undefined, // 物料分类id
      enable: 1, // 是否启用 1启用 2不启用
      measureType: 1, // measureType 1单计量 2多计量
      singleUnitId: undefined, // 单计量单位
      multiGroupId: undefined, // 多计量单位
      saleUnitID: undefined, // 销售单位id
      purchaseUnitID: undefined, // 采购单位id
      stockUnitID: undefined, // 库存单位id
      shipUnitID: undefined, // 发货单位id
      outputUnitID: undefined, // 生产单位id
    },
  });

  let classficationList: any = ref([]); // 储存物料分类数据
  let singleList: any = ref([]); // 储存单计量数据
  let mutilList: any = ref([]); // 储存多计量数据
  let mutliChildList: any = ref([]); // 储存对应多计量的子数据

  let currParentName = ref(''); // 如果是多计量，储存当前父单位的值

  // 获取物料分类数据和单位数据
  const getData = async () => {
    try {
      const res = await Promise.all([
        // 获取物料分类数据
        GetClassificationList({}),
        // 获取单计量数据
        GetUnitList({
          page: 0,
          size: -1,
          type: 1,
        }),
        // 获取多计量数据
        GetUnitList({
          page: 0,
          size: -1,
          type: 2,
        }),
      ]);
      classficationList.value = res[0];
      singleList.value = res[1].content;
      mutilList.value = res[2].content;
    } catch (error: unknown) {
      console.log(error);
    }
  };

  watch(modalVisible, (newVal, oldVal) => {
    // 如果newVal为true
    if (newVal) {
      getData();
      currForm.list = {
        number: '', // 物料编码
        name: '', // 物料名称
        spec: '', // 型号
        remark: '', // 备注
        materialId: undefined, // 物料分类id
        enable: 1, // 是否启用 1启用 2不启用
        measureType: 1, // measureType 1单计量 2多计量
        singleUnitId: undefined, // 单计量单位
        multiGroupId: undefined, // 多计量单位
        saleUnitID: undefined, // 销售单位id
        purchaseUnitID: undefined, // 采购单位id
        stockUnitID: undefined, // 库存单位id
        shipUnitID: undefined, // 发货单位id
        outputUnitID: undefined, // 生产单位id
      };
    }
  });

  // 过滤物料分类数据
  const filterClassficationData = (searchValue: string, nodeData: any) => {
    return nodeData.name.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
  };

  // 改变单计量或者多计量时的事件
  const changeUnitType = (val: number) => {
    // 如果从多计量改成单计量，计量相关的id全部清空， 反之一样
    if (val === 1) {
      currForm.list.multiGroupId = undefined;
      currForm.list.saleUnitID = undefined;
      currForm.list.purchaseUnitID = undefined;
      currForm.list.stockUnitID = undefined;
      currForm.list.shipUnitID = undefined;
      currForm.list.outputUnitID = undefined;
      currParentName.value = '';
    } else {
      currForm.list.singleUnitId = undefined;
    }
  };

  // 选择计量单位组时的事件
  const changeMultiGroup = (id: number) => {
    // 每次重新选择多计量单位先清空所有的子单位
    currForm.list.saleUnitID = undefined;
    currForm.list.purchaseUnitID = undefined;
    currForm.list.stockUnitID = undefined;
    currForm.list.shipUnitID = undefined;
    currForm.list.outputUnitID = undefined;

    // 根据下拉框获取父单位的name和对应子数据的值
    const temp = mutilList.value.find((item: any) => item.id === id);
    currParentName.value = temp.name;
    mutliChildList.value = temp.item;
  };

  // 保存
  const handleOk = () => {
    emit('materialEmit', currForm.list);
    modalVisible.value = false;
  };

  // 取消
  const handleCancel = () => {
    modalVisible.value = false;
    currForm.list = {
      number: '', // 物料编码
      name: '', // 物料名称
      spec: '', // 型号
      remark: '', // 备注
      materialId: undefined, // 物料分类id
      enable: 1, // 是否启用 1启用 2不启用
      measureType: 1, // measureType 1单计量 2多计量
      singleUnitId: undefined, // 单计量单位
      multiGroupId: undefined, // 多计量单位
      saleUnitID: undefined, // 销售单位id
      purchaseUnitID: undefined, // 采购单位id
      stockUnitID: undefined, // 库存单位id
      shipUnitID: undefined, // 发货单位id
      outputUnitID: undefined, // 生产单位id
    };
  };
</script>

<style scoped lang="less">
  .unchecked-radio {
    background-color: #fff;
    color: #dcdfe6;
    border: 1px solid #dcdfe6;
    font-weight: 700;
    font-size: 16px;
    position: relative;
    top: -10px;
  }
  .checked-radio {
    background-color: #3491fa;
    color: #fff;
    border: 1px solid #3491fa;
    font-weight: 700;
    font-size: 16px;
    position: relative;
    top: -10px;
  }
  .radio-icon-box-checked {
    border: 1px solid #3491fa;
    background-color: #fff;
  }
  .radio-icon-box-unchecked {
    border: 1px solid rgba(220, 223, 230, 1);
  }
  .radio-icon-checked {
    color: #3491fa;
  }

  .radio-icon-unchecked {
  }
  .radio-icon {
    position: relative;
    top: 3px;
  }
</style>
